<!DOCTYPE html>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title></title>
    
    <meta name="description" content="Application MOSS CRVA">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
    <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
    
    <link rel="stylesheet" href="css/normalize.css">
    
    <!--link rel="stylesheet" href="css/grid.css"-->
    
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    
    <link rel="stylesheet/less" type="text/css" href="css/main.less">
    <link rel="stylesheet/less" type="text/css" href="css/jquery.dataTables.less">
    <script src="js/less.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui-1.10.3.custom.js"></script>
    <script type="text/javascript" src="js/lib/jquery-touch-punch.js"></script>
    <script type="text/javascript" src="js/lib/xml2json.js"></script>
    <script type="text/javascript" src="js/lib/moment.js"></script>
    <script type="text/javascript" src="js/lib/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="js/lib/datatable-sort-date.js"></script>
    <script type="text/javascript" src="js/lib/detect-date-type.js"></script>
    <script type="text/javascript" src="js/lib/jquery.ui.datepicker-fr.js"></script>
    <script type="text/javascript" src="js/fastbutton.js"></script>
    
    <script type="text/javascript" src="js/crvapp/jsonUtil.js"></script>
    <script type="text/javascript" src="js/crvapp/stockageUtil.js"></script>
    <script type="text/javascript" src="js/crvapp/formUtil.js"></script>
    <script type="text/javascript" src="js/crvapp/dashboard.js"></script>
    <script type="text/javascript" src="js/crvapp/crvaDetails.js"></script>
    <script type="text/javascript" src="js/crvapp/dictionnary.js"></script>
    
    <!-- beans -->
    <script type="text/javascript" src="js/crvapp/beans/aeronef.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/decollageAtterissage.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/grade.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/heuresSAE.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/lieuOACI.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/nomination.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/personne.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/qualification.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/typeAeronef.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/unite.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/vol.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/volPersonneBord.js"></script>
    <script type="text/javascript" src="js/crvapp/beans/typeUnite.js"></script>
    <!-- A utiliser pour le dev (remplit et réinitialise le localStorage) A remplcer plus tard par le connecteur de synchro -->
    <script type="text/javascript" src="js/crvapp/dataScript.js"></script>
    
    <script type="text/javascript" src="js/crvapp/crva.js"></script>
</head>
<body>
    
    <!-- MOSS CRVApp START -->
    
    <div id="view">

<!--################################################################
############################### SPLASH #############################
#################################################################-->
        <div id="page0">
            <div id="poster"></div>
            <div id="titre"></div>
            <div id="controls">
                <div id="loading"><img id="loading-gif" src="/img/loading.gif" alt="Chargement..."></div>
            </div>
            <div id="logos"></div>
        </div>
        <div id="page1">
<!--################################################################
############################### PAGE 1 #############################
#################################################################-->
            <div id="top_panel">
                
                <div class="row span_18">
                    <img id="logo" class="float" src="/img/logo.png">
                    <h1 class="float" style="margin-left: 70px; line-height:normal;">Vols Aéronefs</h1>
                </div>
                
                <div id="crva_list_container">
                	<div id="addFlight" class="button" onclick="crvapp.dashboard.newFlight()"> Nouveau Vol </div>
                    <table class="table span_18 push_1" id="crva_list_table">
                        <thead>
                            <tr>
                                <th style="width: 22px"></th> <!--blank for spacing -->
                                <th>ID Vol</th>
                                <th>UIC Vol</th>
                                <th>OACI</th>
                                <th>GDH Début</th>
                                <th>OACI</th>
                                <th>GDH Fin</th>
                                <th>Mission</th>
                                <th>CRVA</th>
                            </tr>
                        </thead>
                        <tbody id="crva_list_tbody">
                        </tbody>
                    </table>
                </div>
                
                <div id="unfold"></div>
            </div>
            
            <div id="crva_list_widgets_container">
                <div class="float">
                    <div class="card" id="current_flights">
                        <div class="title">9 vols en cours</div>
                        <div class="data">2 CD725, 3 AA330, 4 FS43</div>
                    </div>
                    <div class="card" id="current_consumption">
                        <div class="title">Consommation</div>
                        <div class="jauge_background">
                            <div class="jauge_foreground full" id="fuel_jauge_display"></div>
                        </div>
                    </div>
                </div>
                                <div class="float">
                    <div class="card" id="total_flight_time" style="height:100px;">
                        <div class="title">78:25:12</div>
                        <div class="data">Temps total en vol</div>
                    </div>
                </div>
                <div class="float">
                    <div class="card" id="flights_day_night_repartition">
                        <div class="title">Répartition des vols</div>
                        <div id="global_flights_chart" class="float chart span_2" data-val="25"></div>
                        <table class="data">
                            <tr class="chartable" data-id="1">
                                <td></td>
                                <td class="noborder">Jour</td>
                            </tr>
                            <tr class="chartable" data-id="2">
                                <td></td>
                                <td class="noborder">Nuit</td>
                            </tr>
                        </table>
                    </div>
                </div>
                

            </div>
        </div>
        
<!--################################################################
############################### PAGE 2 #############################
#################################################################-->
        <div id="page2">
            <div id="top_panel_crva" class="row full top master_layout">
                <div id="validate" style="display: none;" class="button" onclick="crvapp.crvaDetails.validate()">Valider</div>
                <div id="moss_return" class="span_2 inline button">Retour</div>
                <h1 class="push_1 span_5 inline">Compte rendu du vol&nbsp;</h1>
                <h1 class="color span_3 inline" id="crva_detail_title"></h1>

                <!--<div id="progress_bar" class="span_10 push_2 float"></div>-->
            </div>
            
            <div id="flight_widgets_container" class="float master_layout">
                <!-- colonne -->
                <div class="float column">
                    <!-- carte compte rendu de vol -->
                    <div class="card" id="current_flights" data-demo="edit_flight_details">
                        <div class="title">Détails du vol</div>
                        <div class="line">
                            <div class="label span_3">Indicatif</div>
                            <div class="data" id="id_display"></div>
                        </div>
                        <div class="line">
                            <div class="label">Unité</div>
                            <div class="data" id="unit_display"></div>
                        </div>
                        <div class="line">
                            <div class="label">Etat</div>
                            <div class="data" id="state_display"></div>
                        </div>
                        <div class="line">
                            <div class="label">Catégorie</div>
                            <div class="data" id="category_display"></div>
                        </div>
                        <div class="line">
                            <div class="label">Aéronef</div>
                            <div class="data" id="aircraft_display"></div>
                        </div>
                        <div class="line">
                            <div class="label">Règle de vol</div>
                            <div class="data" id="flightRule_display"></div>
                        </div>
                        <div class="line">
                            <div class="label">Type de vol</div>
                            <div class="data" id="flighType_display"></div>
                        </div>
                    </div>

                    <div class="card" id="fuel_consumption" data-demo="edit_flight_consumption">
                        <div class="title">Carburant consommé</div>
                        <div class="line">
                            <div class="data" id="fuel_consumption_display"></div>
                            <div class="label">&nbsp; / 550 L</div>
                        </div>
                        <div class="jauge_background">
                            <div class="jauge_foreground full" id="fuel_jauge_display"></div>
                        </div>
                    </div>
                </div>
                
                <div class="float column">
                    <!-- Carte Parcours -->
                    <div class="card" id="infos_flight" data-demo="edit_flight_trip">
                        <div class="title">Parcours</div>
                        <div class="label">Début</div>
                        <div class="line">
                            <div class="subtitle span_2">GDH</div>
                            <div class="data" id="gdh_begin_display"></div>
                        </div>
                        <div class="line">
                            <div class="subtitle span_2">OACI</div>
                            <div class="data" id="oaci_begin_display"></div>
                        </div>
                        <div class="line">
                            <div class="subtitle span_2">Site</div>
                            <div class="data" id="airfield_begin_display"></div>
                        </div>
                        <div class="label">Fin</div>
                        <div class="line">
                            <div class="subtitle span_2">GDH</div>
                            <div class="data" id="gdh_end_display"></div>
                        </div>
                        <div class="line">
                            <div class="subtitle span_2">OACI</div>
                            <div class="data" id="oaci_end_display"></div>
                        </div>
                        <div class="line">
                            <div class="subtitle span_2">Site</div>
                            <div class="data" id="airfield_end_display"></div>
                        </div>
                        <div class="big_size" id="flight_time_total"></div>
                    </div>
                    
                    <div class="card" id="flight_hours" data-demo="edit_flight_hours">
                        <div class="title">Heures de vol</div>
                        <div id="piechart6" data-val="44"></div>
                    </div>
                </div>
                
                <div class="float column">
                    <div class="card" id="intelligence" data-demo="edit_flight_intelligence">
                        <div class="title">Renseignements</div>
                        <div class="line">
                            <div class="label span_9">Nature Mission</div>
                        </div>
                        <div class="line">
                            <div class="data" id="nature_mission_display"></div>
                        </div>
                        <div class="line">
                            <div class="label span_3">Manoeuvre Mission</div>
                        </div>
                        <div class="line">
                            <div class="data" id="manoeuvre_mission_display"></div>
                        </div>
                        <div class="line">
                            <div class="label span_3">Type Mission</div>
                        </div>
                        <div class="line">
                            <div class="data" id="type_mission_display"></div>
                        </div>
                    </div>
                </div>
                
                <div class="float column">
                    <div class="card" id="members_list" data-demo="edit_crme_list_members"><!-- special slide -->
                        <div class="title">Membres d'équipage</div>
                        <div class="label span_1">Total</div>
                        <div class="data huge">3</div>
                    </div>
                </div>

      
                <!-- CRVA Details END -->
            </div>
            
<!--####################################################################
############################### EDIT PANEL #############################
####################################################################-->
            <!-- Sliding Edition Panel -->
            <div id="edit_panel" class="float master_layout">
                <div class="edit_panel_slides_wrapper">
                    <!-- this is mockup data for demonstration purposes only -->
                        
                    <!-- ########################### SLIDE 1 ############################# -->
                    <div class="demo_slide" id="edit_flight_details">
                        <div class="edit_section">
                            <div class="header">Détails du vol</div>
                        </div>
                        <div class="edit_section">
                            <div class="title">Indicatif</div>
                            <div id="demo_text_editor" class="type_text single-line" data-type="text" contenteditable="true">Indicatif à saisir</div>
                            <!--input id="demo_text_editor_input" type="text" class="type_text" style="display: none;" /-->
                        </div>
                        <hr>
                        
                        <div class="edit_section">
                            <div class="title">Unité</div>
                            <div class="type_list">
                                <table id="unit_list_table">
                                	 <tr data-id="1110000002">
                                        <td class="span_6">FRA2311</td>
                                        <td>3RHC-BHRA-EHRA1</td>
                                    </tr>
    								<tr data-id="1110000004">
                                        <td class="span_6">FRA2312</td>
                                        <td>3RHC-BHRA-EHRA2</td>
                                    </tr>                               
                                    <tr data-id="1110000013">
                                        <td class="span_6">FRA2321</td>
                                        <td>3RHC-BHMA-EHM1</td>
                                    </tr>
                                    <tr data-id="1110000017">
                                        <td class="span_6">FRA2313</td>
                                        <td>3RHC-BHRA-EHRA3</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <hr>
                        
                        <div class="edit_section">
                            <div class="title">Etat</div>
                            <table class="type_list" id="flight_state_table">
                                <tr>
                                    <td class="hidden">ANN</td>
                                    <td>Annulé</td>
                                </tr>
                                <tr class="alternate">
                                    <td class="hidden">BR</td>
                                    <td>Brouillon</td>
                                </tr>
                                <tr>
                                    <td class="hidden">CLO</td>
                                    <td>Cloturé</td>
                                </tr>
                                <tr class="alternate">
                                    <td class="hidden">MOD</td>
                                    <td>Modifé</td>
                                </tr>
                                <tr>
                                    <td class="hidden">PROG</td>
                                    <td>Programmé</td>
                                </tr>
                                <tr>
                                    <td class="hidden">REF</td>
                                    <td>Refusé</td>
                                </tr>
                            </table>
                        </div>
                        <hr>
                        
                        <div class="edit_section">
                            <div class="title">Catégorie</div>
                            <table class="type_list" id="category_flight_table">
                                <tr>
                                    <td class="hidden">OTH</td>
                                    <td>Autre</td>
                                </tr>
                                <tr class="alternate">
                                    <td class="hidden">CIVIL ETRANGER</td>
                                    <td>Civil étranger</td>
                                </tr>
                                <tr>
                                    <td class="hidden">CIVIL FRANCAIS</td>
                                    <td>Civil Français</td>
                                </tr>
                                <tr class="alternate">
                                    <td class="hidden">MILITAIRE BASE</td>
                                    <td>Militaire Basé</td>
                                </tr>
                                <tr>
                                    <td class="hidden">MILITAIRE ETRANGER</td>
                                    <td>Militaire Etranger</td>
                                </tr>
                                <tr class="alternate">
                                    <td class="hidden">MILITAIRE FRANCAIS</td>
                                    <td>Militaire Français</td>
                                </tr>
                                <tr>
                                    <td class="hidden">MILITAIRE RSAF</td>
                                    <td>Militaire RSAF</td>
                                </tr>
                            </table>
                        </div>
                        <hr>
                        
                        <div class="edit_section">
                            <div class="title">Aéronef</div>
                            <table class="type_list" id="aeronef_flight_table">
                                <thead>
                                    <tr>
                                        <th>Aéronef</th>
                                        <th>Type</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr data-id="1110000085">
                                        <td class="span_4">FMGNF</td>
                                        <td>SA342M</td>
                                    </tr>
                                    <tr class="alternate" data-id="1110000090">
                                        <td class="span_6">FMGCQ</td>
                                        <td>S342M1</td>
                                    </tr>
                                    <tr data-id="1110000067">
                                        <td class="span_6">FMGKA</td>
                                        <td>SA342M</td>
                                    </tr>
                                    <tr class="alternate" data-id="1110000024">
                                        <td class="span_6">FMDBP</td>
                                        <td>SA330T</td>
                                    </tr>
                                    <tr data-id="1110000015">
                                        <td class="span_6">FMDDE</td>
                                        <td>SA330R</td>
                                    </tr>
                                    <tr class="alternate" data-id="1110000091">
                                        <td class="span_6">FMGAM</td>
                                        <td>S342M1</td>
                                    </tr>
                                    <tr data-id="1110000099">
                                        <td class="span_6">FMGER</td>
                                        <td>S342L1</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <hr>
                        
                        <div class="edit_section">
                            <div class="title">Règle de vol</div>
                            <table class="type_list" id="flight_rule_table">
                                <tr>
                                    <td class="hidden">A</td>
                                    <td>CAM</td>
                                </tr>
                                <tr>
                                    <td class="hidden">E</td>
                                    <td>CER</td>
                                </tr>
                                <tr>
                                    <td class="hidden">I</td>
                                    <td>IFR</td>
                                </tr>
                                <tr>
                                    <td class="hidden">O</td>
                                    <td>COM</td>
                                </tr>
                                <tr>
                                    <td class="hidden">V</td>
                                    <td>VFR</td>
                                </tr>
                                <tr>
                                    <td class="hidden">Y</td>
                                    <td>IFR-VFR</td>
                                </tr>
                                <tr>
                                    <td class="hidden">Z</td>
                                    <td>VFR-IFR</td>
                                </tr>
                            </table>
                        </div>
                        <hr>
                        
                        <div class="edit_section">
                            <div class="title">Type de vol</div>
                            <table class="type_list" id="flight_type_table">
                                <tr>
                                    <td class="hidden">D</td>
                                    <td>D</td>
                                </tr>
                                <tr>
                                    <td class="hidden">I</td>
                                    <td>CAM India</td>
                                </tr>
                                <tr>
                                    <td class="hidden">M</td>
                                    <td>Militaire</td>
                                </tr>
                                <tr>
                                    <td class="hidden">T</td>
                                    <td>CAM Tactique</td>
                                </tr>
                                <tr>
                                    <td class="hidden">V</td>
                                    <td>CAM Victor</td>
                                </tr>
                                <tr>
                                    <td class="hidden">X</td>
                                    <td>Autre</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    <!-- ########################### SLIDE 2 ############################# -->
                    
                    <div class="demo_slide" id="edit_flight_consumption">
                        <div class="edit_section">
                            <div class="header">Carburant consommé</div>
                            <div class="wrapper">
                                <div id="slider-carburantConsomme-data" class="single-line" data-type="text" contenteditable="true">150</div>
<!--                                 <div id="amount-fuel-consumption" data-type="text" class="single-line" contenteditable="true">0</div> -->
<!--                                 <input id="slider-carburantConsomme-data" type="number" value="0" > -->
                                <div id="slider-carburantConsomme"></div>
                            </div>
                            <div class="wrapper">
                                <div id="slider-carburantTotal">/ 550 L</div>
                            </div>
                        </div>
                    </div>

                    <!-- ########################### SLIDE 3 ############################# -->
                    <div class="demo_slide" id="edit_flight_trip">
                        <div class="edit_section">
                            <div class="header">Parcours</div>
                        </div>
                        <div class="edit_section">
                            <div class="title">Début</div>
                            <div class="span_3 float" id="flight-gdh-begin"></div>
                            <input type="hidden" id="flight-gdh-begin-data" />
                            <div id="timespinner_begin" class="float timespinner">
                                <table>
                                    <tr id="r_1_begin">
                                        <td id="l_1" class="up" data-rel="#r_2_begin #l_1_begin" data-max="23">▲</td>
                                        <td id="l_2"></td>
                                        <td id="l_3" class="up" data-rel="#r_2_begin #l_3_begin" data-max="59">▲</td>
                                    </tr>
                                    <tr id="r_2_begin">
                                        <td><input type="text" id="l_1_begin" value="00" data-max="23"/></td>
                                        <td id="l_2_begin" class="sep">:</td>
                                        <td><input type="text" id="l_3_begin" value="00" data-max="59"/></td>
                                    </tr>
                                    <tr id="r_3_begin">
                                        <td id="l_1" class="down" data-rel="#r_2_begin #l_1_begin" data-max="23">▼</td>
                                        <td id="l_2_"></td>
                                        <td id="l_3" class="down" data-rel="#r_2_begin #l_3_begin" data-max="59">▼</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <hr>

                        <div class="edit_section">
                            <div class="title">lieu de départ</div>
                            <div class="type_list">
                                <table id="oaci_depart" class="span_4">
                                	<thead>
                                		<tr>
                                			<th>Code OACI</th>
                                			<th>Nom de Site</th>
                                		</tr>
                                	</thead>
                                	<tbody>
                                		<tr data-id="1110000001">
                                        	<td>LFQE</td>
                                        	<td>Etain Rouvres</td>
                                    	</tr>
                                    	<tr data-id="1110000002">
                                    		<td>LFAD</td>
                                    		<td>Compiègne</td>
                                    	</tr>
                                    	<tr data-id="1110000003">
                                    		<td>LFQP</td>
                                    		<td>Phalsbourg</td>
                                    	</tr>
                                    	<tr data-id="1110000004">
                                    		<td>LFMC</td>
                                    		<td>Le Cannet</td>
                                    	</tr>
                                    	<tr data-id="1110000005">
                                    		<td>LFQG</td>
                                    		<td>Nevers</td>
                                    	</tr>
                                    	<tr data-id="1110000006">
                                    		<td>ZZZZ</td>
                                    		<td>Indéterminé</td>
                                    	</tr>
                                	</tbody>
                                </table>
                            </div>
                        </div>
                        <hr>

                        <div class="edit_section">
                            <div class="title">Fin</div>
                            <div class="span_3 float" id="flight-gdh-end"></div>
                            <input type="hidden" id="flight-gdh-end-data" />
                            <div id="timespinner" class="float timespinner">
                                <table>
                                    <tr id="r_1_end">
                                        <td id="l_1" class="up" data-rel="#r_2_end #l_1_end" data-max="23">▲</td>
                                        <td id="l_2"></td>
                                        <td id="l_3" class="up" data-rel="#r_2_end #l_3_end" data-max="59">▲</td>
                                    </tr>
                                    <tr id="r_2_end">
                                        <td><input type="text" id="l_1_end" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 0 : this.value"/></td>
                                        <td id="l_2_end" class="sep"></td>
                                        <td><input type="text" id="l_3_end" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 0 : this.value"/></td>
                                    </tr>
                                    <tr id="r_3_end">
                                        <td id="l_1" class="down" data-rel="#r_2_end #l_1_end" data-max="23">▼</td>
                                        <td id="l_2"></td>
                                        <td id="l_3" class="down" data-rel="#r_2_end #l_3_end" data-max="59">▼</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <hr>

                        <div class="edit_section">
                            <div class="title">Lieu d'arrivé</div>
                            <div class="type_list">
                                <table id="oaci_fin" class="span_4">
                                	<thead>
                                		<tr>
                                			<th>Code OACI</th>
                                			<th>Nom de Site</th>
                                		</tr>
                                	</thead>
                                	<tbody> 
                                		<tr data-id="1110000001">
                                        	<td>LFQE</td>
                                        	<td>Etain Rouvres</td>
                                    	</tr>
                                    	<tr data-id="1110000002">
                                    		<td>LFAD</td>
                                    		<td>Compiègne</td>
                                    	</tr>
                                    	<tr data-id="1110000003">
                                    		<td>LFQP</td>
                                    		<td>Phalsbourg</td>
                                    	</tr>
                                    	<tr data-id="1110000004">
                                    		<td>LFMC</td>
                                    		<td>Le Cannet</td>
                                    	</tr>
                                    	<tr data-id="1110000005">
                                    		<td>LFQG</td>
                                    		<td>Nevers</td>
                                    	</tr>
                                    	<tr data-id="1110000006">
                                    		<td>ZZZZ</td>
                                    		<td>Indéterminé</td>
                                    	</tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <hr>

                    </div>
                    
                    <!-- ########################### SLIDE 4 ############################# -->
    				<div class="demo_slide" id="edit_flight_intelligence">
    					<div class="edit_section">
    						<div class="header">Renseignements</div>
    					</div>
    					<div class="edit_section">
    						<div class="title">Nature Mission</div>
    						<table id="mission_nature_list" class="type_list">
    							<thead>
    								<tr>
    									<th>Code</th>
    									<th>Libellé</th>
    								</tr>
    							</thead>
    							<tbody id="mission_nature_list_tbody"></tbody>
    						</table>
    					</div>
    					<div class="edit_section">
    						<div class="title">Manoeuvre Mission</div>
    						<table id="mission_manoeuvre_list" class="type_list">
    							<thead>
    								<tr>
    									<th>Code</th>
    									<th>Libellé</th>
    								</tr>
    							</thead>
    							<tbody id="mission_manoeuvre_list_tbody"></tbody>
    						</table>
    					</div>
    					<div class="edit_section">
    						<div class="title">Type Mission</div>
    						<table id="mission_type_list" class="type_list">
    							<thead>
    								<tr>
    									<th>Code</th>
    									<th>Libellé</th>
    								</tr>
    							</thead>
    							<tbody id="mission_type_list_tbody"></tbody>
    						</table>
    					</div>
    				</div>

                    <!-- ########################### SLIDE 5 ############################# -->
                    <div class="demo_slide" id="edit_crme_list_members">
                        <div id="crme_top_panel" class="edit_section">
                            <div class="header">
                                CRME
                            </div>
                            
                            <div id="crme_list_container">
                                <table class="centered span_12" id="members_list_table">
                                    <thead>
                                        <tr>
                                            <th>Nom</th>
                                            <th>Grade</th>
                                            <th>Fonction</th>
                                            <th>CRME</th>
                                        </tr>
                                    </thead>
                                    <tbody id="members_list_tbody"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- ########################### SLIDE 6 ############################# -->
                    <div class="demo_slide" id="edit_flight_hours" data-demo="flight_hours">

                        <div class="editable_list_table">
                            <div class="edit_section">
                                <div class="header">Liste des heures</div>

                                <table contenteditable="false" class="editable_list float" id="edit_crme_hours_list">
                                    <thead>
                                        <tr>
                                            <th>Type</th>
                                            <th>Durée Jour</th>
                                            <th>Durée Nuit</th>
                                        </tr>
                                    </thead>
                                    <tbody id="edit_crme_hours_list_tbody"></tbody>
                                    <tfoot></tfoot>
                                </table>
                            </div>
                            <hr>

                            <div class="editable_list_edit_panel">
                                <div class="edit_section ">
                                    <div class="title">Type d'heure</div>
                                    <table id="type_heure_table">
                                        <thead>
                                            <tr>
                                                <th>Code</th>
                                                <th>Type</th>
                                            </tr>
                                        </thead>
                                        <tbody id="type_heure_tbody"></tbody>
                                    </table>
                                </div>
                                <hr>

                                <div class="edit_section">
                                    <div class="title">Durée Jour</div>
                                    <div id="timespinner2" class="timespinner selected">
                                        <table>
                                            <tr id="r_1_day">
                                                <td id="l_1_timespinner2" class="up" data-rel="#r_2_day_timespinner2 #l_1_day_timespinner2" data-max="23">▲</td>
                                                <td id="l_2"></td>
                                                <td id="l_3_timespinner2" class="up" data-rel="#r_2_day_timespinner2 #l_3_day_timespinner2" data-max="59">▲</td>
                                            </tr>
                                            <tr id="r_2_day_timespinner2">
                                                <td><input type="text" id="l_1_day_timespinner2" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 00 : this.value"/></td>
                                                <td id="l_2_day" class="sep"></td>
                                                <td><input type="text" id="l_3_day_timespinner2" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 00 : this.value"/></td>
                                            </tr>
                                            <tr id="r_3_day_timespinner2">
                                                <td id="l_1_timespinner2" class="down" data-rel="#r_2_day_timespinner2 #l_1_day_timespinner2" data-max="23">▼</td>
                                                <td id="l_2"></td>
                                                <td id="l_3_timespinner2" class="down" data-rel="#r_2_day_timespinner2 #l_3_day_timespinner2" data-max="59">▼</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <hr>

                                <div class="edit_section">
                                    <div class="title">Durée Nuit</div>
                                    <div id="timespinner3" class="timespinner selected">
                                        <table>
                                            <tr id="r_1_night">
                                                <td id="l_1_timespinner3" class="up" data-rel="#r_2_night_timespinner3 #l_1_night_timespinner3" data-max="23">▲</td>
                                                <td id="l_2"></td>
                                                <td id="l_3_timespinner3" class="up" data-rel="#r_2_night_timespinner3 #l_3_night_timespinner3" data-max="59">▲</td>
                                            </tr>
                                            <tr id="r_2_night_timespinner3">
                                                <td><input type="text" id="l_1_night_timespinner3" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 0 : this.value"/></td>
                                                <td id="l_2_night" class="sep"></td>
                                                <td><input type="text" id="l_3_night_timespinner3" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 0 : this.value"/></td>
                                            </tr>
                                            <tr id="r_3_night_timespinner3">
                                                <td id="l_1_timespinner3" class="down" data-rel="#r_2_night_timespinner3 #l_1_night_timespinner3" data-max="23">▼</td>
                                                <td id="l_2"></td>
                                                <td id="l_3_timespinner3" class="down" data-rel="#r_2_night_timespinner3 #l_3_night_timespinner3" data-max="59">▼</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <hr>
                            </div>
                        </div>
                    </div><!-- fin slide 6 -->
                </div>


                <div id="crme_cards_wrapper">
                    <!-- ############################ CRME CARDS ##############################-->
                    <div id="crme_cards" class="float">

                        <!-- détails -->
                        <div class="card float" id="crme_member_details" data-demo="edit_crme_member_details">
                            <div class="title">Détails membre équipage</div>
                            <div class="line">
                                <div class="label">Nom</div>
                                <div class="data"></div>
                            </div>
                            <div class="line">
                                <div class="label">NID</div>
                                <div class="data"></div>
                            </div>
                            <div class="line">
                                <div class="label">Fonction</div>
                                <div class="data"></div>
                            </div>
                            <div class="line">
                                <div class="label">Type de place</div>
                                <div class="data"></div>
                            </div>
                            <div class="line">
                                <div class="label">Responsabilité</div>
                                <div class="data"></div>
                            </div>
                            <div class="line">
                                <div class="label">Type de vol</div>
                                <div class="data"></div>
                            </div>
                            <div class="line">
                                <div class="label">Grade</div>
                                <div class="data"></div>
                            </div>
                        </div>
                        
                        <!-- heures -->
                        <div class="card float" id="crme_hours" data-demo="edit_crme_hours">
                            <div class="title">Liste des heures</div>
                            <!-- Ici on affiche des diagrammes et un total -->
                            <div class="line">
                                <div class="label span_2">Total</div>
                                <div class="data">5:35</div>
                            </div>
                            <div class="line">
                                <div class="label span_2">Autres</div>
                                <div class="data">2:13</div>
                            </div>
                            <div id="piechart2" data-val="34"></div>
                        </div>

                        <!-- renseignements -->
                        <div class="card float" id="crme_rens" data-demo="edit_crme_rens">
                            <div class="line">
                                <div class="title">Renseignements</div>
                                <div class="line">
                                    <div class="label">Approches</div>
                                    <div class="data"></div>
                                </div>
                                <div class="title">Mission</div>
                                <div class="line">
                                    <div class="label">Manoeuvre</div>
                                    <div class="data"></div>
                                </div>
                                <div class="line">
                                    <div class="label">Type</div>
                                    <div class="data"></div>
                                </div>
                                <div class="line">
                                    <div class="label">Nature</div>
                                    <div class="data"></div>
                                </div>
                            </div>
                        </div>

                        <!-- passes -->
                        <div class="card float" id="crme_passes" data-demo="edit_crme_passes">
                            <div class="title">Passes</div>
                            <div class="label span_1">Total</div>
                            <div class="data">5</div>
                            <div id="piechart4" data-val="80"></div>
                        </div>

                        <!-- exercices particuliers -->
                        <div class="card float" id="crme_exos_part" data-demo="edit_crme_exos_part">
                            <div class="title">Exercices particuliers</div>
                            <div class="label span_1">Total</div>
                            <div class="data">3</div>
                            <div id="piechart5" data-val="45"></div>
                        </div>
                    </div>
                    
                    <!-- ######################### CRME EDIT PANEL ########################### -->                
                    <div id="crme_edit" class="">

                        <!-- ################ CRME Slide 1 ################### -->
                        <div class="crme_slide" id="edit_crme_member_details" data-demo="crme_member_details">
                            <div class="edit_section">
                                <div class="header">Détails membre équipage</div>
                            </div>
                            <div class="edit_section">
                                <div class="title">Nom</div>
                                <div id="demo_text_editor2" class="type_text" data-type="text">Nom</div>
                                <input id="demo_text_editor_input" type="text" class="type_text" style="display: none;" />
                            </div>
                            <hr>

                            <div class="edit_section">
                                <div class="title">Matricule</div>
                                <div id="demo_text_editor3" class="type_text" data-type="text">NID</div>
                                <input id="demo_text_editor_input" type="text" class="type_text" style="display: none;" />
                            </div>
                            <hr>

                            <div class="edit_section">
                                <div class="title">Grade</div>
                                <div class="type_list">
                                    <table>
                                        <tr class="span_6">
                                            <td data-id="1">Capitaine</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="2">Moussaillon</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="3">Génie</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="4">Lieutenant</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <hr>

                            <div class="edit_section">
                                <div class="title">Fonction à bord</div>
                                <div class="type_list">
                                    <table>
                                        <tr class="span_6">
                                            <td data-id="1">Fonction x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="2">Fonction x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="3">Fonction x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="4">Fonction x</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <hr>

                            <div class="edit_section">
                                <div class="title">Type place</div>
                                <div class="type_list">
                                    <table>
                                        <tr class="span_6">
                                            <td data-id="1">Place x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="2">Place x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="3">Place x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="4">Place x</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <hr>

                            <div class="edit_section">
                                <div class="title">Responsabilité</div>
                                <div class="type_list">
                                    <table>
                                        <tr class="span_6">
                                            <td data-id="1">Valeur x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="2">Valeur x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="3">Valeur x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="4">Valeur x</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <hr>

                            <div class="edit_section">
                                <div class="title">Type vol</div>
                                <div class="type_list">
                                    <table>
                                        <tr class="span_6">
                                            <td data-id="1">Type x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="2">Type x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="3">Type x</td>
                                        </tr>
                                        <tr class="span_6">
                                            <td data-id="4">Type x</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <hr>
                        </div><!-- fin slide 1 -->

                        <!-- ################# CRME Slide 2 ################### -->
                        

                        <!-- renseignements -->
                        <div class="crme_slide" id="edit_crme_rens" data-demo="crme_rens">
                            <div class="line">
                                <div class="title">Renseignements</div>
                                <div class="line">
                                    <div class="label">Approches</div>
                                    <div class="data"></div>
                                </div>
                                <div class="title">Mission</div>
                                <div class="line">
                                    <div class="label">Manoeuvre</div>
                                    <div class="data"></div>
                                </div>
                                <div class="line">
                                    <div class="label">Type</div>
                                    <div class="data"></div>
                                </div>
                                <div class="line">
                                    <div class="label">Nature</div>
                                    <div class="data"></div>
                                </div>
                            </div>
                        </div>

                        <!-- passes -->
                        <div class="crme_slide" id="edit_crme_passes" data-demo="crme_passes">
                            <div class="title">Passes</div>
                            <div class="label">Total</div>
                            <div class="data">5</div>
                            <div id="piechart4" data-val="80"></div>
                        </div>

                        <!-- exercices particuliers -->
                        <div class="crme_slide" id="edit_crme_exos_part" data-demo="crme_exos_part">
                            <div class="title">Exercices particuliers</div>
                            <div class="label">Total</div>
                            <div class="data">3</div>
                            <div id="piechart5" data-val="45"></div>
                        </div>
                    </div>
                </div> <!-- END crme_cards wrapper -->
            </div><!-- #edit_panel end -->
        </div>
        </div><!-- #view end -->
    
<script src="js/main.js"></script>
<script src="js/editable_list.js"></script>
<script src="js/navigation.js"></script>
<script type="text/javascript">
    
    var flightTable;
    var natureMissionTable;
    var manoeuvreMissionTable;
    var typeMissionTable;
    var codeServiceAerienTable;
    
    $(document).ready(function() {
        $('#page0, #page2').hide();
        
        if (crvapp.stockageUtil.getvalueAsJson("crvappData") === "" || crvapp.stockageUtil.getvalueAsJson("crvappData") === null
            || crvapp.stockageUtil.getvalueAsJson("crvappData") === undefined) {
        	
        	console.log("BEGIN : " + moment().format());
//         	try {
        		dataScript.populateLocalStorage();
// 			} catch (e) {
// 				 console.log("END : " + moment().format());
// 			}
            
            console.log("END : " + moment().format());
            
        } else {
            crvapp.stockageUtil.loadCrvAppData();
        }
        crvapp.dashboard.fillFlight(document.getElementById("crva_list_tbody"));
        
        flightTable = $("#crva_list_table").dataTable({
            "oLanguage": {
                "sUrl": "frenchDatatable.txt"
            },
            "iDisplayLength": 3,
            "bLengthChange" : false,
            "bFilter" : true,
            "bPaginate" : true,
            "bInfo" : true,
            "sScrollY" : "200px",
            "aoColumns" : [ {
                "bSortable" : false
            }, null, null, null, null, null, null, null, null ]
        });
        
        $("#members_list_table").dataTable({
            "bLengthChange" : false,
            "bFilter" : false,
            "bPaginate" : false,
            "bInfo" : false,
            "bDestroy" : true,
            "bRetrieve" : false,
            "oLanguage": {
                "sUrl": "frenchDatatable.txt"
            }
        });
        
        // Renseignements
        
        crvapp.dashboard.createDictionnaryTableList();
        
        // Nature Mission
        
        /* Add a click handler to the rows - this could be used as a callback */
	    $("#mission_nature_list tbody tr").click( function( e ) {
	        if ( $(this).hasClass('row_selected') ) {
	            $(this).removeClass('row_selected');
	        }
	        else {
	        	natureMissionTable.$('tr.row_selected').removeClass('row_selected');
	            $(this).addClass('row_selected');
	        }
	    });
        natureMissionTable = $("#mission_nature_list").dataTable({
        	 "oLanguage": {
                 "sUrl": "frenchDatatable.txt"
             },
            "iDisplayLength": 5,
        	"bPaginate" : true,
        	"bInfo" : true,
        	"bFilter" : true,
        	"aoColumns": [
        	              {"sWidth": "25%"},
        	              {"sWidth": "75%"}]
        });
        $("#mission_nature_list").css("width", "90%");
        
        // Manoeuvre Mission
        
        /* Add a click handler to the rows - this could be used as a callback */
	    $("#mission_manoeuvre_list tbody tr").click( function( e ) {
	        if ( $(this).hasClass('row_selected') ) {
	            $(this).removeClass('row_selected');
	        }
	        else {
	        	manoeuvreMissionTable.$('tr.row_selected').removeClass('row_selected');
	            $(this).addClass('row_selected');
	        }
	    });
        manoeuvreMissionTable = $("#mission_manoeuvre_list").dataTable({
        	 "oLanguage": {
                 "sUrl": "frenchDatatable.txt"
             },
            "iDisplayLength": 5,
        	"bPaginate" : true,
        	"bInfo" : true,
        	"bFilter" : true,
        	"aoColumns": [
        	              {"sWidth": "25%"},
        	              {"sWidth": "75%"}]
        });
        $("#mission_manoeuvre_list").css("width", "90%");
        
        // Type Mission
        
        /* Add a click handler to the rows - this could be used as a callback */
	    $("#mission_type_list tbody tr").click( function( e ) {
	        if ( $(this).hasClass('row_selected') ) {
	            $(this).removeClass('row_selected');
	        }
	        else {
	        	typeMissionTable.$('tr.row_selected').removeClass('row_selected');
	            $(this).addClass('row_selected');
	        }
	    });
        typeMissionTable = $("#mission_type_list").dataTable({
        	 "oLanguage": {
                 "sUrl": "frenchDatatable.txt"
             },
            "iDisplayLength": 5,
        	"bPaginate" : true,
        	"bInfo" : true,
        	"bFilter" : true,
        	"aoColumns": [
        	              {"sWidth": "25%"},
        	              {"sWidth": "75%"}]
        });
        $("#mission_type_list").css("width", "90%");
       
     	// Fin Renseignements
     	
     	// Heures de vols
     	
     	 /* Add a click handler to the rows - this could be used as a callback */
	    $("#type_heure_table tbody tr").click( function( e ) {
	        if ( $(this).hasClass('row_selected') ) {
	            $(this).removeClass('row_selected');
	        }
	        else {
	        	codeServiceAerienTable.$('tr.row_selected').removeClass('row_selected');
	            $(this).addClass('row_selected');
	        }
	    });
        codeServiceAerienTable = $("#type_heure_table").dataTable({
        	 "oLanguage": {
                 "sUrl": "frenchDatatable.txt"
             },
            "iDisplayLength": 5,
        	"bPaginate" : true,
        	"bInfo" : true,
        	"bFilter" : true,
        	"aoColumns": [
        	              {"sWidth": "25%"},
        	              {"sWidth": "75%"}]
        });
        $("#type_heure_table").css("width", "90%");
     	
     	// Fin heures de vols

        $("#slider-carburantConsomme").slider({
            range : "min",
            min : 0,
            max : 550,
            value : 0, /* /!\ Penser à mettre à jour #slider-carburantConsomme-data si on change cette*/
            animate : true,
            slide : function(event, ui) {
                $("#slider-carburantConsomme-data").text(ui.value);
            }
        });

        $("#slider-carburantConsomme-data").keyup(function(e) {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            } else {
                $("#slider-carburantConsomme").slider("value", $("#slider-carburantConsomme-data").text());
            }
        });
        
        $( "#slider-carburantConsomme-data" ).text( $( "#slider-carburantConsomme" ).slider( "value" ) );
        
        $("#flight-gdh-begin").datepicker({ 
            regional: $.datepicker.regional["fr"],
            altField: "#flight-gdh-begin-data"
        });

        $("#flight-gdh-end").datepicker({ 
            regional: $.datepicker.regional["fr"],
            altField: "#flight-gdh-end-data"
        });
        crvapp.stockageUtil.exportXmlData();
	});

	/* Get the rows which are currently selected */
    function fnGetSelected( oTableLocal )
    {
        return oTableLocal.$('tr.row_selected');
    }
	
</script>
<!-- MOSS CRVApp END -->

<script src="js/vendor/zepto.min.js"></script>
<script src="js/helper.js"></script>

</body>
</html>